<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dom-排他思想+事件分发机制</title>
  </head>
  <body>
    <div>
      <input type="button" value="按钮" />
      <input type="button" value="按钮" />
      <input type="button" value="按钮" />
      <input type="button" value="按钮" />
      <input type="button" value="按钮" />
    </div>

    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
    <script>
      /*
        排他思想: 同组元素中同一时刻只有一个会被激活,其他都未激活,当切换元素时,
        只有当前元素被激活,其他都未激活
      */
      /* document.querySelectorAll('input').forEach(btn => {
        btn.onclick = function () {
          //先清除所有
          document.querySelectorAll('input').forEach(btn => (btn.style.backgroundColor = ''))
          //再改自己
          this.style.backgroundColor = 'skyblue'
        }
      }) */

      /* 上述代码中,虽然实现了相应的功能,但是出现了代码的重复冗余,如何优化解决? */
      //1.使用jquery框架
      //特性: 隐式迭代,不需要写forEach即可完成迭代,当然,如果需要,也可以显示迭代
      $('input').click(function () {
        /*  $('input').each(function (idx, btn) {
          $(btn).css('background-color', '')
        }) */
        $('input').css('background-color', '')
        $(this).css('background-color', 'skyblue')
      })

      //2.利用事件分发机制
      //给父元素绑定事件,这样可以自动分发给它旗下的子元素,简化遍历
      /* const div = document.querySelector('div')
      div.onclick = function () {
        //event是事件对象,只要是事件触发的函数,内部都可以直接使用这个event,而且这个event对象会根据事件的不同,产生不同的属性或者函数
        //event.target就可以获取当前触发事件的对象
        const btn = event.target
        //去掉所有
        document.querySelectorAll('input').forEach(btn => (btn.style.backgroundColor = ''))
        //修改自己
        btn.style.backgroundColor = 'skyblue'
      } */
    </script>
  </body>
</html>
